<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo is-active"
    :class="{ minWidth: isCollapse }"
    text-color="#fff"
    active-text-color="#409eff"
    background-color="#304156"
    router
    :collapse="isCollapse"
  >
    <el-menu-item>
      <!-- <i class="el-icon-view"></i> -->
      <span slot="title">易购后台管理系统</span>
    </el-menu-item>
    <el-menu-item index="/commodity">
      <i class="el-icon-menu"></i>
      <!-- <span slot="title">商品管理</span> -->
      <span slot="title">{{ $t("home.product") }}</span>
    </el-menu-item>
    <el-menu-item index="/specification">
      <i class="el-icon-setting"></i>
      <!-- <span slot="title">规格参数</span> -->
      <span slot="title">{{ $t("home.params") }}</span>
    </el-menu-item>
    <el-menu-item index="/advert">
      <i class="el-icon-files"></i>
      <span slot="title">广告分类</span>
    </el-menu-item>
    <el-menu-item index="/personal">
      <i class="el-icon-s-custom"></i>
      <span slot="title">个人中心</span>
    </el-menu-item>

    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-s-grid"></i>
        <span>更多选择</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="1-1">下午甜点</el-menu-item>
        <el-menu-item index="1-2">闲聊中心</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">设计圈</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template slot="title">下午茶</template>
        <el-menu-item index="1-4-1">选项1</el-menu-item>
      </el-submenu>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: "SliderNav",

  props: {
    isCollapse: {
      type: Boolean,
      defalut: true,
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu-vertical-demo {
  height: 100%;
  float: left;
  border-right: none;
}
.is-active {
  background: #26364b !important;
}
</style>